<template>
  <div class="BMI">
    <hr>
    <div v-if="isShowState">
      你的BMI值为："", 状态： ""
    </div>
    <Form1 @submit-data="handleSubmit"/>
    <hr>
    <BMIStatus :status="status"/>
    <!--    <BMIRecord :bmi-list="[{}]"/>-->
    <BMIRecord
      msg="BMI记录"
      :bmi-list="bmiList"
      @delete-item="delItem"
    />
  </div>
</template>

<script>
// @ === src
import BMIForm1 from "@/components/BMIForm";
import BMIStatus from "@/components/BMIStatus";
import BMIRecord from "@/components/BMIRecord";
import { mapState, mapMutations } from "vuex"

export default {
  name: 'App',
  components: {
    Form1: BMIForm1,
    BMIStatus,
    BMIRecord
  },
	computed: {
		...mapState("bmi", ["bmiList"])
	},
  data() {
    return {
      msg: "你好 vue !!!",
      isShowState: false,
      status: ""
    }
  },
  created() {
    this.$store.dispatch("bmi/getBMIList")
  },
  methods: {
		...mapMutations("bmi", ["SET_BMI_LIST"]),
    async delItem(id) {
			this.$store.dispatch("bmi/delItem", id)
    },
    async handleSubmit(data) {
			/*
			this.$store.dispatch("addItem", data).then(res => {
				this.status = res.data.status
			})*/
			
			const res = await this.$store.dispatch("bmi/addItem", data)
			this.status = res.data.status
      
      // this.isShowState = true
    },
  }
}
</script>
